<template>
    <div ref="detailTimePeriodRef" class="detail-time-period">
        <DetailTimePeriodItem
            id-name="detailTimePeriodUpvoteRef"
            title="点赞时间段"
            :skeleton-flag="detailTimePeriodUpvoteFlag"
            :echarts-data="detailTimePeriodUpvoteData" />
        <DetailTimePeriodItem
            id-name="detailTimePeriodReviewRef"
            title="评论时间段"
            :skeleton-flag="detailTimePeriodReviewFlag"
            :echarts-data="detailTimePeriodReviewData" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import DetailTimePeriodItem from './DetailTimePeriodItem.vue';
import { useLazyData } from '@/hooks/commonHooks';
import { massBrowse } from '@/api/friendcircle';

const route = useRoute();
const routeQuery = route.query;
const detailTimePeriodUpvoteFlag = ref<boolean>(false);
const detailTimePeriodReviewFlag = ref<boolean>(false);
const detailTimePeriodUpvoteData = ref<any>({});
const detailTimePeriodReviewData = ref<any>({});
const detailTimePeriodRef = ref<null | (InstanceType<typeof HTMLDivElement> & any)>(null);

useLazyData(detailTimePeriodRef, () => initData());

/**
 * @description: 获取点赞时间段数据
 * @return {*}
 */
const initUpvoteData = () => {
    getEChartsData(1).then((data: any) => {
        detailTimePeriodUpvoteData.value = data;
    });
};

/**
 * @description: 获取评论时间段数据
 * @return {*}
 */
const initReviewData = () => {
    getEChartsData(2).then((data: any) => {
        detailTimePeriodReviewData.value = data;
    });
};

/**
 * @description: 获取点赞评论数据（1 点赞  2 评论）
 * @param {*} type
 * @return {*}
 */
const getEChartsData = (type: any) => {
    const { id: send_moment_id } = routeQuery;
    const filter_time = '~';
    const params = {
        send_moment_id,
        filter_time,
        type
    };
    return massBrowse(params, true);
};

const initData = () => {
    detailTimePeriodUpvoteFlag.value = false;
    detailTimePeriodReviewFlag.value = false;
    initUpvoteData();
    initReviewData();
    detailTimePeriodUpvoteFlag.value = true;
    detailTimePeriodReviewFlag.value = true;
};
</script>

<style lang="scss" scoped>
.detail-time-period {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 18px;

    .el-card {
        flex: 1;
    }
}
</style>
